<template>
    <div class="hha">

<img class="logo" src="./image/shunfeng.jpg" alt="圆通">
    <div class="right">

    <p>地点：商业二街</p>
    <p>当前状态： <span :class="{a1:status==0,a2:status==1,a3:status!=0&&status!=1}">{{statu}}</span> </p>
<p>
    <el-button round @click="handleget">代取快递</el-button>
    <el-button round @click="handlepost">收件寄件</el-button>
</p>
    </div>
    
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item :label="label1" prop="postName">
          <el-input v-model="form.postName" :placeholder="p1" />
        </el-form-item>
        <el-form-item :label="danhao" prop="postCode">
          <el-input v-model="form.postCode" :placeholder="p2" />
        </el-form-item>
        <el-form-item :label="phone" prop="postSort">
           <el-input v-model="form.postphone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item v-show="sta" label="取件码" prop="postCode">
          <el-input v-model="form.postphone" placeholder="请输入取件码" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    

    </div>
    
</template>

<script>
    export default {
        name:'Shunfeng',
        data(){
            return {
                status:'0',
                         // 遮罩层
    //   loading: false,
      // 选中数组
      ids: [],
      sta:true,
      danhao:'取件单号',
label1:'取件人昵称',
      phone:'取件人电话',
      p1:'请输入代取名称',
      p2:'请输入取件单号',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [
          {
              postId:1,
              postCode:3
          }
      ],
      // 弹出层标题
      title: "代取快递",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        postName: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        postName: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        postCode: [
          { required: true, message: "编码不能为空", trigger: "blur" }
        ],
        postSort: [
          { required: true, message: "顺序不能为空", trigger: "blur" }
        ]
      }
            }
        },
        computed:{
            statu(){
               return this.status==0?'空闲':this.status==1?'一般':'繁忙' 
            }
        },
        methods:{
            handleget(){
this.open=true
            },
            handlepost(){
this.open=true;
this.title='收件寄件'
this.label1='寄件人名称'
this.sta=false
this.p1='请输入寄件人昵称'
this.p2='请输入要寄的物品'
this.phone='寄件人电话'
this.danhao='寄件物品'
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" >
.a1{color: seagreen;}.a2{color: orange;}.a3{color: maroon;}
.hha{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // width: 500px;
    // height: 500px;
    background-image: url(./image/bg.jpg);
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    // border: 1px solid red;
}
.logo{
    border-radius: 50%;
    // display: block;
    height: 300px;
    width: 300px;
    position: absolute;
    float: left;
    top: 20%;
    left: 20%;
    
}
.right{
    position: absolute;
    top: 20%;
    right: 30%;
    font-size: 1.5em;
}
</style>